<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>E.D HUT</title>
	<link rel="stylesheet" type="text/css" href="./css.css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAV_VvJfRiKdwN9G7sDziHWhz47pIvAAV4&callback=initMap" async defer></script>
</head>

<body>
	<nav class="navbar navbar-expand-lg fixed-top">
		<div class="container-fluid">
			<div class="container-fluid__toggler-block">
			<a class="navbar-brand" href="#">
				<img src="./img/logo.png" alt="logo">
			</a>
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
				<div class="a1-icon"></div>
				<div class="a2-icon"></div>
				<div class="a3-icon"></div>
			</button>
			</div>
			<div class="collapse navbar-collapse" id="navbarNavDropdown">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link homePage" href="#homePage" onclick="change('homePage')" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">HOME</a>
					</li>
					<li class="nav-item">
						<a class="nav-link aboutUs" href="#aboutUs" onclick="change('aboutUs')"  data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">ABOUT US</a>
					</li>
					<li class="nav-item">
						<a class="nav-link orderNow" href="#orderNow" onclick="change('orderNow')"  data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">ORDER NOW</a>
					<li class="nav-item">
						<a class="nav-link cakes" href="#cakes" onclick="change('cakes')"  data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">CAKES</a>
					</li>
					<li class="nav-item">
						<a class="nav-link address" href="#address" onclick="change('address')"  data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">ADDRESS</a>
					</li>
					<li class="nav-item">
						<a class="nav-link contactUs" href="#contactUs" onclick="change('contactUs')" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">CONTACT US</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<section id="homePage">
		<div class="background"></div>
		<div class="homPage-container">
			<h4 class="homPage-container__title">Welcome to</h4>
			<h2 class="homPage-container__name">E.D HUT</h2>
		</div>
	</section>
	<section id="aboutUs">
		<div class="background"></div>
		<div class="homPage-container">
			<h4 class="homPage-container__title">Couple words</h4>
			<h2 class="homPage-container__name">ABOUT US</h2>
			<p class="homPage-container__intro">
				E.D HUT starts in Canberra as a self-designed Café with fancy bakery, food, and beverages, customized Laser cut fabrication design is also provided to our beloved customers.
				Chef David has passion about creating innovative baking products and he has been working in kitchens for years. When collaborating with Emma who has architectural design background, their professional skills combined and harmonized to create their unique café.
				In 2022, they decided to pursue their dream of opening the café with laser cut design fabrication. In the store, you will find the interior design and construction are all credited to Emma & David. Not only from the bakery, coffee, and etc, design performance can be found throughout the store.
			</p>
		</div>
	</section>
	<section id="orderNow">
		<div class="background"></div>
		<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
			<div class="carousel-indicators">
			  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
			  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
			  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
			  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
			</div>
			<div class="carousel-inner">
			  <div class="carousel-item active">
				<img src="./img/all day菜单.PNG" class="d-block w-100" alt="menu">
			  </div>
			  <div class="carousel-item">
				<img src="./img/cake菜单.PNG" class="d-block w-100" alt="menu">
			  </div>
			  <div class="carousel-item">
				<img src="./img/lunch菜单.PNG" class="d-block w-100" alt="menu">
			  </div>
			  <div class="carousel-item">
				<img src="./img/饮品菜单.PNG" class="d-block w-100" alt="menu">
			  </div>
			</div>
			<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
			  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
			  <span class="visually-hidden">Previous</span>
			</button>
			<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
			  <span class="carousel-control-next-icon" aria-hidden="true"></span>
			  <span class="visually-hidden">Next</span>
			</button>
		  </div>
	</section>
	<section id="cakes"> 
		<div class="background"></div>
		<ul class="list-group list-group-flush">
			<li class="list-group-item">
				<img src="./img/cake1.png" class="img-thumbnail" alt="cake">
				<div class="list-group-item__intro">
					<h4>MAGNUM BASQUE BURNT CHEESECAKE</h4>
					<p>Essentially, a Basque burnt cheesecake has its signature burnt top yet remains creamy on the inside. The interior smooth melt-in-mouth center then paired with sweet umami from Japanese matcha powder takes the classic burnt cheesecake up a notch!</p>
				</div>
			</li>
			<li class="list-group-item">
				<div class="list-group-item__intro">
					<h4>MAGNUM BASQUE BURNT CHEESECAKE</h4>
					<p>While having the signature burnt top, the crust is covered with Magnum. The interior smooth melt-in-mouth center then paired with sweet chocolate lava.</p>
				</div>
				<img src="./img/cake2.png" class="img-thumbnail" alt="cake">
			</li>
			<li class="list-group-item">
				<img src="./img/cake3.png" class="img-thumbnail" alt="cake">
				<div class="list-group-item__intro">
					<h4>LIGHT CHEESECAKE</h4>
					<p>The light cheesecake is based on a fluffy sponge cake paired with inner smooth melt-in-mouth filling of sweet cheese center.</p>
				</div>
			</li>
			<li class="list-group-item">
				<div class="list-group-item__intro">
					<h4>SOYMILK LAVA CAKE</h4>
					<p>While having the fluffy sponge cake as base, the top and inner center is filled with soymilk lava flowing inside out.</p>
				</div>
				<img src="./img/cake4.png" class="img-thumbnail" alt="cake">
			</li>
			<li class="list-group-item">
				<img src="./img/cake5.png" class="img-thumbnail" alt="cake">
				<div class="list-group-item__intro">
					<h4>HOOKAIDO DOUBLE CHEESECAKE</h4>
					<p>This is a three-layer cheesecake consisting of a fatless sponge base, a baked cream-cheese layer and a mascarpone mousse layer all covered with a dusting of sponge cake crumbs.</p>
				</div>
			</li>
		</ul>  
	</section>
	<section id="address">
		<div class="background"></div>
		<div class="homPage-container">
			<h2 class="homPage-container__name">ADDRESS</h2>
			<h4 class="homPage-container__title">We’re Here</h4>
		</div>
		<div class="address-container">
			<p class="address-container__title">Our location<br/> 154 E 8TH AVE, VANCOUVER, BC</p>
			<!-- <div id="googleMap" style="height:80%;"></div> -->
			<img src="./img/map.jpg" alt="map" width="400px">
		</div>
	</section>	
	<section id="contactUs">
		<div class="background"></div>
		<div class="contactUs-detail">
			<h4 class="contactUs-detail__title">Call us</h4>
			<p class="contactUs-detail__contact">604-423-4520</p>
			<h4 class="contactUs-detail__title">Email Us</h4>
			<p class="contactUs-detail__contact">yujunchensb@gmail.com</p>
		</div>
		<div class="social-media">
			<a href="https://www.instagram.com/e.d_hut/"><i class="bi bi-instagram"></i></a>
			<a href="https://m.facebook.com/people/ED-Hut/100082291094454/"><i class="bi bi-facebook"></i></a>
		</div>
		<div class="contactUs-worktime">
			<h4 class="homPage-container__title">OPEN TIME</h4>
			<div class="container">
				<div class="row">
					<div class="col-4">MON-FRI</div>
					<div class="col-6">AM8:00 - PM16:30</div>
				</div>
				<div class="row">
					<div class="col-4">SAT</div>
					<div class="col-6">AM10:30 - PM16:30</div>
				</div>
			</div>
		</div>
	</section>
</body>
	<script type="text/javascript" src="./index.js"></script>
</html>